/**
 * 新建/筛选 方案弹出框
 */

import React,{PropTypes,Component,PureComponent}  from 'react';
import {Select ,Button ,Tree ,Modal, Form, Input,Row,Col,message } from 'antd';
import { connect } from 'react-redux';

import NewPlanFit from './newSchemeFit';
import SchemeSelect from './editScheme';
import SchemeKpi from './schemeKpi';

import style from './schemeFit.less';

const FormItem = Form.Item;
const SchemeCreateForm = Form.create()(
	(props) => {
	const { visible, onCancel, onCreate, form, toolprops } = props;
	const { getFieldDecorator } = form;
	return (
		visible?
		<Modal
			className={`${style.schemefit} setSelect-panel`}
			visible={visible}
			title="筛选方案设置"
			okText="保存方案"
			onCancel={onCancel}
			onOk={onCreate}
		>
			 <Row>
				 {/* 新建方案名称 */}
				 <NewPlanFit />
			 </Row>
			 <Row >
				 <Form layout="vertical" className={style.SchemeSelectform}>
					 <Row type="flex" justify="space-around">
						 {/* 编辑筛选方案指标 */}
						 <Col>
							 <SchemeSelect {...toolprops} className={style.SchemeSelect}/>
						 </Col>
						 <Col>
							 <SchemeKpi {...toolprops}/>
						 </Col>
					 </Row>
				 </Form>
			 </Row>
		 </Modal>: null
	 );
 }
)

const mapStateToProps = state => ({
 sfschemename: state.fundpool.sfschemename,
 schemename: state.fundpool.schemename,
 checkkpi: state.fundpool.checkkpi,
});
const mapDispatchToProps = {
	getSchemeFitkpi: query => ({
		type: 'fundpool/getSchemeFitkpi',
		payload: query || {},
	}),
 editSchemekpi: query => ({
	 type: 'fundpool/editSchemekpi',
	 payload: query || {},
 })

};
@connect( mapStateToProps,mapDispatchToProps)
 class PlanFit extends PureComponent {
 state = {
	 visible: false,
 };
 componentDidUpdate() {
	 const { sfschemeid,sfschemename} = this.props;
	 const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
	 const ele = document.querySelector('.setSelect-panel .ant-modal-body');
	 // const dable = document.querySelector('.setSelect-panel  .ant-modal-footer ');
	 // if(dable && sfschemename == "默认方案" && sfschemeid == 1){
		//  dable.disabled = true;
	 // }else{
		//  dable.disabled = false;
	 // }
	 if (ele) {
		 ele.style.height = `${screenHeight * 0.6}px`;
	 }
 }
 showModal = () => {
	 const { getSchemeFitkpi } = this.props;
	 this.setState({ visible: true });
	 getSchemeFitkpi({
		 schemeId:1,
		 schemeName:"默认方案"
	 })
 }
 handleCancel = () => {
	 this.setState({ visible: false });
 }
 handleCreate = () => {
	 const form = this.form;
	 const { editSchemekpi ,sfschemeid,sfschemename,checkkpi,sfkpiName} = this.props;
	 console.log("SchememFit>>>>>",this.props,checkkpi);
	 const schemeKpis = [];
	 if(checkkpi.length>=1){
		 var planKpi = checkkpi.pop()
		 console.log("PlanFit>>planKpi",planKpi);
		 for(var i=0; i<=planKpi.length; i++) {
			 if(planKpi[i] == 0 ) {
				 planKpi.splice(i, 1);
			 }
			 if(planKpi[i] == 1){
				 planKpi.splice(i, 1);
			 }
			 if(planKpi[i] == 2 ) {
				 planKpi.splice(i, 1);
			 }
			 if(planKpi[i] == 3){
				 planKpi.splice(i, 1);
			 }
		 }
		 planKpi.map((item)=>{
			 schemeKpis.push({"kpiName":item })
		 })
	 }else{
			sfkpiName.map((item)=>{
				schemeKpis.push({"kpiName":item})
			})

	 }
	 // if(sfkpiName !== undefined && _.isEmpty(planKpi)){
	 //   sfkpiName.map((item)=>{
	 //     console.log("ccc",item);
	 //     schemeKpis.push({"kpiName":item });
	 //   })
	 // }
	form.validateFields((err, values) => {
		if (err) {
			return;
		}
		if(sfschemename == "默认方案" && sfschemeid == 1){
			message.warning("默认方案禁止操作!");
			this.setState({
				visible: true
			})
			return;
		}
		if(!sfschemename && !sfschemeid){
			message.warning("请选择方案!");
			this.setState({
				visible: true
			})
		}else{
			editSchemekpi({
				"schemeName":sfschemename,
				"schemeId":sfschemeid,
				"schemeKpis":schemeKpis
			})
			this.setState({ visible: false });
		}

		 form.resetFields();

	 });
 }
 saveFormRef = (form) => {
	 this.form = form;
 }
 render() {
	 return (
		 <div>
			 <Button type="primary" onClick={this.showModal} >筛选方案设置</Button>
			 <SchemeCreateForm
				 ref={this.saveFormRef}
				 visible={this.state.visible}
				 onCancel={this.handleCancel}
				 onCreate={this.handleCreate}
				 toolprops={this.props}
			 />

		 </div>
	 );
 }
}
export default Form.create({
})(PlanFit);
